بناء روابط مختصر باستخدام إطار العمل فلاسك Flask ومحرك قواعد البيانات SQLite

في عصر الإنترنت الحديث، أصبحت روابط المواقع الطويلة والمعقدة تمثل تحديًا كبيرًا عند مشاركة الروابط عبر وسائل التواصل الاجتماعي أو في الرسائل النصية أو البريد الإلكتروني. لهذا السبب، باتت الحاجة ماسة إلى خدمات تقصير الروابط التي تحول تلك الروابط الطويلة إلى روابط قصيرة يسهل حفظها وتبادلها. في هذا المقال سيتم استعراض كيفية بناء نظام مختصر للروابط باستخدام إطار العمل فلاسك (Flask) بلغة بايثون مع الاعتماد على محرك قواعد البيانات SQLite لتخزين الروابط والمعلومات المرتبطة بها.

مقدمة عن إطار العمل Flask

فلاسك (Flask) هو إطار عمل خفيف ومرن لتطوير تطبيقات الويب باستخدام لغة البرمجة بايثون. يتميز بسهولة التعلم والاستخدام، ويوفر بيئة مناسبة لتطوير تطبيقات صغيرة ومتوسطة الحجم. من أبرز مزايا فلاسك هي إمكانية التوسع باستخدام الإضافات (Extensions) التي تضيف وظائف متعددة حسب الحاجة.

يُعد فلاسك الخيار المثالي لبناء تطبيق روابط مختصرة بفضل بساطته وسرعته في تنفيذ المهام الأساسية مع إمكانية إضافة مزايا متقدمة بسهولة.

قاعدة البيانات SQLite ودورها في المشروع

SQLite هي قاعدة بيانات خفيفة الوزن مدمجة مع تطبيقات صغيرة ومتوسطة، ولا تتطلب خادم قاعدة بيانات منفصل، حيث تُخزن البيانات في ملف واحد على النظام. هذا يجعلها مناسبة جدًا لتطبيقات مثل خدمة تقصير الروابط التي تحتاج لتخزين بيانات مثل الروابط الأصلية، الروابط المختصرة، وتاريخ الإنشاء.

استخدام SQLite في تطبيق فلاسك يوفر سهولة في الإدارة وسرعة في التنفيذ مع إمكانية النقل البسيط للبيانات عن طريق الملف المخصص.

تصميم قاعدة البيانات لنظام تقصير الروابط

قبل البدء في بناء التطبيق، يجب التفكير في تصميم قاعدة البيانات بشكل يناسب الغرض من المشروع. الحد الأدنى من الجداول المطلوبة هو جدول واحد يحتوي على الحقول التالية:

• id: مفتاح أساسي لتحديد كل سجل.

• original_url: الرابط الأصلي الطويل الذي يريد المستخدم تقصيره.

• short_code: الكود المختصر الذي يمثل الرابط المختصر.

• created_at: تاريخ ووقت إنشاء الرابط المختصر.

• clicks: عدد مرات النقر على الرابط المختصر (اختياري لمتابعة الإحصائيات).

نموذج الجدول:

يمثل هذا الجدول الأساس لتخزين جميع المعلومات اللازمة لتشغيل خدمة تقصير الروابط.

الخطوة الأولى: إعداد بيئة العمل

لبدء العمل، يجب التأكد من وجود بيئة بايثون مهيئة مع تثبيت مكتبة Flask. يمكن ذلك عبر الأوامر التالية في الطرفية:

bash
CopyEdit
pip install flask

بالإضافة إلى ذلك، مكتبة sqlite3 مدمجة مع بايثون بشكل افتراضي، لذلك لا حاجة لتثبيت إضافات خارجية لقاعدة البيانات.

هيكل المشروع المقترح

عادةً، يتم تنظيم مشروع فلاسك على النحو التالي:

cpp
CopyEdit
shortener/
│
├── app.py
├── templates/
│   ├── index.html
│   ├── result.html
├── static/
│   └── style.css
├── shortener.db

• app.py: ملف التطبيق الرئيسي الذي يحتوي على الكود البرمجي.

• templates/: مجلد يحتوي على قوالب HTML.

• static/: مجلد للملفات الثابتة مثل CSS أو الصور.

• shortener.db: ملف قاعدة بيانات SQLite.

الخطوة الثانية: بناء التطبيق الأساسي باستخدام Flask

في ملف app.py، يتم استيراد مكتبات فلاسك و sqlite3 وبناء الوظائف الأساسية التي تدير عملية إدخال الرابط الطويل وتحويله إلى رابط مختصر.

python
CopyEdit
from flask import Flask, request, redirect, render_template, url_for
import sqlite3
import string
import random
from datetime import datetime

app = Flask(__name__)
DATABASE = 'shortener.db'

def get_db_connection():
    conn = sqlite3.connect(DATABASE)
    conn.row_factory = sqlite3.Row
    return conn

def create_table():
    conn = get_db_connection()
    conn.execute('''
        CREATE TABLE IF NOT EXISTS links (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            original_url TEXT NOT NULL,
            short_code TEXT NOT NULL UNIQUE,
            created_at TEXT NOT NULL,
            clicks INTEGER DEFAULT 0
        )
    ''')
    conn.commit()
    conn.close()

def generate_short_code(length=6):
    characters = string.ascii_letters + string.digits
    while True:
        short_code = ''.join(random.choice(characters) for _ in range(length))
        conn = get_db_connection()
        existing = conn.execute('SELECT * FROM links WHERE short_code = ?', (short_code,)).fetchone()
        conn.close()
        if not existing:
            return short_code

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        original_url = request.form['original_url']
        if original_url:
            short_code = generate_short_code()
            created_at = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
            conn = get_db_connection()
            conn.execute('INSERT INTO links (original_url, short_code, created_at) VALUES (?, ?, ?)',
                         (original_url, short_code, created_at))
            conn.commit()
            conn.close()
            short_url = request.host_url + short_code
            return render_template('result.html', short_url=short_url, original_url=original_url)
    return render_template('index.html')

@app.route('/')
def redirect_short_url(short_code):
    conn = get_db_connection()
    link = conn.execute('SELECT * FROM links WHERE short_code = ?', (short_code,)).fetchone()
    if link:
        conn.execute('UPDATE links SET clicks = clicks + 1 WHERE short_code = ?', (short_code,))
        conn.commit()
        conn.close()
        return redirect(link['original_url'])
    else:
        conn.close()
        return 'الرابط المختصر غير موجود', 404

if __name__ == '__main__':
    create_table()
    app.run(debug=True)

شرح الكود:

• create_table(): تنشئ الجدول في قاعدة البيانات إذا لم يكن موجودًا.

• generate_short_code(): تولد سلسلة عشوائية مكونة من 6 أحرف أو أرقام لضمان عدم تكرار الأكواد.

• index(): تعرض صفحة الإدخال التي يمكن من خلالها للمستخدم إدخال الرابط الطويل. عند الإرسال، يتم إنشاء الرابط المختصر وتخزينه.

• redirect_short_url(): تقوم بإعادة التوجيه للرابط الأصلي عند الوصول إلى الرابط المختصر. كما تقوم بزيادة عدد النقرات.

الخطوة الثالثة: تصميم واجهة المستخدم

واجهة المستخدم مهمة لجعل تجربة تقصير الروابط بسيطة وجذابة. باستخدام ملفات HTML ضمن مجلد templates يمكن بناء واجهة تحتوي على نموذج لإدخال الرابط وعرض النتيجة.

ملف index.html

html
CopyEdit
html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>خدمة تقصير الروابطtitle>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
head>
<body>
    <div class="container">
        <h1>أدخل الرابط الطويل لتقصيرهh1>
        <form method="POST">
            <input type="url" name="original_url" placeholder="https://example.com/long-url" required>
            <button type="submit">اختصر الرابطbutton>
        form>
    div>
body>
html>

ملف result.html

html
CopyEdit
html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <title>الرابط المختصرtitle>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
head>
<body>
    <div class="container">
        <h1>تم إنشاء الرابط المختصر بنجاحh1>
        <p>الرابط الأصلي: <a href="{{ original_url }}" target="_blank">{{ original_url }}a>p>
        <p>الرابط المختصر: <a href="{{ short_url }}" target="_blank">{{ short_url }}a>p>
        <a href="{{ url_for('index') }}">اختصر رابط آخرa>
    div>
body>
html>

تحسين تجربة المستخدم باستخدام CSS

لجعل الواجهة أجمل وأكثر تفاعلية يمكن إضافة بعض التنسيقات في ملف style.css داخل مجلد static:

css
CopyEdit
body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    direction: rtl;
    padding: 30px;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
}

input[type="url"] {
    width: 80%;
    padding: 10px;
    margin-bottom: 20px;
    font-size: 1.1em;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 25px;
    font-size: 1.1em;
    background-color: #28a745;
    border: none;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

a {
    color: #007bff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

تحسينات وتوسعات مستقبلية

بعد بناء التطبيق الأساسي، يمكن إضافة ميزات عديدة لتعزيز الخدمة وجعلها أكثر فاعلية، منها:

• إضافة نظام تسجيل دخول للمستخدمين: ليتمكن كل مستخدم من إدارة روابطه المختصرة.

• إحصائيات متقدمة: عرض عدد النقرات، توزيع النقرات حسب الوقت، مصدر النقرات (جغرافيا أو جهاز).

• تحقق من صحة الرابط: التأكد من أن الرابط الأصلي صالح قبل تخزينه.

• تصميم واجهة API: لتوفير إمكانية تقصير الروابط برمجيًا عبر واجهة برمجية.

• توليد أكواد مخصصة: السماح للمستخدمين باختيار الكود المختصر الخاص بهم.

• إضافة خاصية انتهاء صلاحية الروابط: بحيث يمكن تحديد فترة زمنية لانتهاء الرابط المختصر.

• تحسين الأمان: مثل حماية التطبيق من الهجمات الشائعة (CSRF، XSS، Injection).

مقارنة بين استخدام SQLite ومحركات قواعد بيانات أخرى في هذا المشروع

الخلاصة

إن بناء نظام تقصير روابط باستخدام Flask و SQLite يعد خيارًا عمليًا وفعالًا لتطبيقات الويب الصغيرة والمتوسطة التي تحتاج إلى خدمة مختصرة للروابط. يعتمد المشروع بشكل أساسي على مبدأ توليد أكواد قصيرة فريدة تُخزن في قاعدة بيانات SQLite مع الربط بين الكود المختصر والرابط الأصلي. توفّر Flask بنية مرنة لتطوير واجهات المستخدم والوظائف الخلفية، بينما توفر SQLite سهولة في التخزين دون الحاجة لإعدادات خادم معقدة.

يقدم هذا النظام قاعدة متينة يمكن تطويرها وتوسيعها لاحقًا بإضافة مميزات مثل الإحصائيات، إدارة المستخدمين، والأمان المتقدم، مما يجعله مناسبًا لبناء خدمة متكاملة لتقصير الروابط تلبي حاجات المستخدمين المعاصرين.

المصادر والمراجع

1. موقع Flask الرسمي: https://flask.palletsprojects.com/

2. مستندات SQLite الرسمية: https://www.sqlite.org/docs.html